<template>
  <div class="relative_height">
    <Navbar :indexWidth="true" ref="navbarRef" />
    <div class="info indexWidth u-flex u-col-top">
      <div class="navbar">
        <div class="nav_wrap">
          <div class="nav_uploader">
            <img :src="userInfo.avatar.preview_url" v-if="userInfo.avatar" />
            <img src="../../image/mine/head.png" v-else />
          </div>
          <div class="nav_name">{{ userInfo.user_name }}</div>
        </div>
        <div
          class="nav_item u-flex-center hand"
          v-for="(item, index) in navList"
          :class="{ active: navIndex === item.id }"
          @click="navClick(item.id)"
        >
          <div class="nav_line" v-if="navIndex === item.id"></div>
          <div class="nav_text">{{ item.name }}</div>
        </div>
      </div>
      <!-- 公司信息 -->
      <div class="form" v-if="navIndex === 1">
        <div class="form_tit">{{ navList.find(item => item.id === navIndex).name }}</div>
        <div class="form_basic">
          <div class="basic_tit u-flex">
            <img src="../../image/mine/basic.png" alt="" />
            基本信息
          </div>
          <div class="basic_head u-flex">
            头像：
            <el-upload
              class="basic_uploader hand"
              :action="apiUrl"
              :disabled="companyShow"
              :show-file-list="false"
              :data="uploadData"
              :on-success="
                (res, file) => {
                  handleAvatarSuccess(1, res)
                }
              "
              :before-upload="
                file => {
                  beforeAvatarUpload(file)
                }
              "
            >
              <div class="basic_img">
                <img :src="headImg" v-if="headImg" />
                <img src="../../image/mine/head.png" v-else />
              </div>
              <img src="../../image/mine/camera.png" class="basic_camera hand" />
            </el-upload>
          </div>
          <el-form
            class="company_form"
            :model="companyForm"
            :hide-required-asterisk="true"
            ref="companyRef"
            label-position="top"
          >
            <div class="u-flex u-row-between">
              <el-form-item label="账号：" class="company_input">
                <el-input disabled v-model="userInfo.user_name" placeholder="请输入公司账号">
                </el-input>
              </el-form-item>
              <el-form-item label="公司名称：" class="company_input">
                <el-input
                  disabled
                  v-model="certification.company_name"
                  placeholder="请输入公司名称"
                >
                </el-input>
              </el-form-item>
            </div>
            <div class="basic_tit u-flex">
              <img src="../../image/mine/phone.png" alt="" />
              联系方式
            </div>
            <div class="u-flex u-flex-wrap u-row-between">
              <el-form-item label="公司地址：" class="company_input">
                <el-input disabled v-model="certification.address" placeholder="请输入公司地址">
                </el-input>
              </el-form-item>
              <el-form-item label="联系电话：" prop="phone" class="company_input">
                <el-input
                  :disabled="companyShow"
                  v-model="companyForm.phone"
                  placeholder="请输入公司联系电话"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="公司邮箱：" prop="company_email" class="company_input">
                <el-input
                  v-model="companyForm.company_email"
                  :disabled="companyShow"
                  placeholder="请输入公司邮箱"
                >
                </el-input>
              </el-form-item>
            </div>
            <div class="basic_tit u-flex">
              <img src="../../image/mine/industry.png" alt="" />
              行业信息
            </div>
            <div class="u-flex u-row-between">
              <el-form-item label="从业年限 ：" prop="year" class="company_input">
                <el-input
                  :disabled="companyShow"
                  v-model="companyForm.year"
                  placeholder="请输入公司从业年限 "
                >
                </el-input>
              </el-form-item>
              <el-form-item label="所在行业：" prop="industry" class="company_input">
                <!-- <el-select v-model="companyForm.industry" placeholder="请选择所在行业">
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> -->
                <el-input
                  :disabled="companyShow"
                  v-model="companyForm.industry"
                  placeholder="请输入所在行业"
                >
                </el-input>
              </el-form-item>
            </div>
            <el-form-item label="公司简介：" prop="desc" class="custom_textarea">
              <el-input
                type="textarea"
                :disabled="companyShow"
                v-model="companyForm.desc"
                placeholder="请输入公司简介"
                :rows="4"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div class="next_btn next_btn_company u-flex-center hand" @click="companyStep">
            {{ companyShow ? '修改' : '保存' }}
          </div>
        </div>
      </div>
      <!-- 资质审核 -->
      <div class="form" v-if="navIndex === 4">
        <div class="form_tit">{{ navList.find(item => item.id === navIndex).name }}</div>
        <!-- 审核中 -->
        <div class="examine" v-if="examineStatus === 1">
          <img src="../../image/login/examine.png" class="img1" />
          <div class="exa_tit">审核中</div>
          <div class="exa_tip">资质审核预计需要1-3个工作日，请耐心等待</div>
        </div>
        <!-- 审核失败 -->
        <div class="examine" v-if="examineStatus === 2">
          <img src="../../image/mine/error.png" class="img1" />
          <div class="exa_tit">审核失败</div>
          <div class="exa_tip">请核对并修改信息后，在重新提交</div>
          <div class="exa_prompt">
            <div class="pro_tit">您提交的内容有如下错误：</div>
            <div class="pro_cont u-flex u-col-top">
              <img src="../../image/mine/cha.png" class="pro_cha" />
              {{ certification.err_message }}
            </div>
          </div>
          <div class="exa_btn u-flex-center hand" @click="againSubmit">重新提交</div>
        </div>
        <!-- 审核通过 -->
        <!-- <div class="examine">
          <img src="../../image/mine/success.png" class="img1" />
          <div class="exa_tit">审核通过</div>
        </div> -->
        <el-form
          v-if="examineStatus === 3"
          class="form_content"
          :model="basicForm"
          :hide-required-asterisk="true"
          :rules="basicRules"
          ref="basicRef"
          label-position="top"
        >
          <el-form-item label="业务人员姓名" prop="name" class="custom-label">
            <el-input
              class="custom-input"
              :disabled="examineShow"
              v-model="basicForm.name"
              placeholder="请输入姓名"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="业务联系人手机号：" prop="mobile" class="custom-label">
            <el-input
              class="custom-input"
              :disabled="examineShow"
              v-model="basicForm.mobile"
              placeholder="请输入公司业务联系人手机号"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="企业名称：" prop="company_name" class="custom-label">
            <el-input
              class="custom-input"
              :disabled="examineShow"
              v-model="basicForm.company_name"
              placeholder="请输入企业名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="企业办公地址：" prop="address" class="custom-label">
            <el-input
              class="custom-input"
              :disabled="examineShow"
              v-model="basicForm.address"
              placeholder="请输入企业办公地址"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="营业执照" prop="license_image_id">
            <div class="form_upload" v-if="examineShow">
              <img :src="licenseImg" class="card_img" />
              <!-- <img src="../../image/login/cha.png" class="card_icon hand" @click="delateClick(1)"></img> -->
            </div>
            <el-upload
              v-else
              class="form_upload hand form_blue"
              :action="apiUrl"
              :show-file-list="false"
              :data="uploadData"
              :disabled="examineShow"
              :on-success="
                (res, file) => {
                  handleAvatarSuccess(2, res)
                }
              "
              :before-upload="
                file => {
                  beforeAvatarUpload(file)
                }
              "
            >
              <div class="upload_img">
                <img :src="licenseImg" />
              </div>
              <div class="upload_abo">重新上传</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="组织机构代码：" prop="organizing_code" class="custom-label">
            <el-input
              class="custom-input"
              :disabled="examineShow"
              v-model="basicForm.organizing_code"
              placeholder="请输入组织机构代码"
            >
            </el-input>
          </el-form-item>
          <div class="next_btn u-flex-center hand" @click="reSubmit" v-if="!examineShow">提交</div>
        </el-form>
      </div>
      <!-- 密码修改 -->
      <div class="form" v-if="navIndex === 5">
        <div class="form_tit">{{ navList.find(item => item.id === navIndex).name }}</div>
        <el-form
          class="form_content"
          :model="ruleForm"
          :hide-required-asterisk="true"
          :rules="rules"
          ref="formRef"
          label-position="top"
        >
          <el-form-item label="当前密码" prop="currentPassword" class="custom-label">
            <el-input
              :type="passwordType3"
              v-model="ruleForm.currentPassword"
              placeholder="请输入当前密码"
            >
              <template #suffix>
                <img
                  src="../../image/login/eyeB.png"
                  @click="eyeClick(3)"
                  v-if="passwordType3 === 'password'"
                  class="eye-icon hand"
                />
                <img
                  src="../../image/login/eye.png"
                  v-else
                  @click="eyeClick(3)"
                  class="eye-icon hand"
                />
              </template>
            </el-input>
            <!-- <div class="form-tip">密码长度该为8-16个字母，并且组合如下：字母，数字和符号</div> -->
          </el-form-item>
          <el-form-item label="新密码" prop="password" class="custom-label">
            <el-input :type="passwordType" v-model="ruleForm.password" placeholder="请输入新密码">
              <template #suffix>
                <img
                  src="../../image/login/eyeB.png"
                  @click="eyeClick(1)"
                  v-if="passwordType === 'password'"
                  class="eye-icon hand"
                />
                <img
                  src="../../image/login/eye.png"
                  v-else
                  @click="eyeClick(1)"
                  class="eye-icon hand"
                />
              </template>
            </el-input>
            <!-- <div class="form-tip">密码长度该为8-16个字母，并且组合如下：字母，数字和符号</div> -->
          </el-form-item>
          <el-form-item label="确认密码" prop="againPassword" class="custom-label">
            <el-input
              :type="passwordType2"
              v-model="ruleForm.againPassword"
              placeholder="请确认密码"
            >
              <template #suffix>
                <img
                  src="../../image/login/eyeB.png"
                  @click="eyeClick(2)"
                  v-if="passwordType2 === 'password'"
                  class="eye-icon hand"
                />
                <img
                  src="../../image/login/eye.png"
                  v-else
                  @click="eyeClick(2)"
                  class="eye-icon hand"
                />
              </template>
            </el-input>
          </el-form-item>
          <div class="next_btn u-flex-center hand" @click="oneStep">确认修改</div>
        </el-form>
      </div>

      <!-- 退出登录弹窗 -->
      <el-dialog v-model="exitShow" :show-close="false" :close-on-click-modal="false" align-center>
        <div class="log_out u-flex-col u-col-center u-row-center">
          <div class="tit">确定要退出当前用户吗?</div>
          <div class="u-flex u-flex-center">
            <div class="btn btn_bor u-flex-center hand" @click="exitShow = false">取消</div>
            <div class="btn u-flex-center hand" @click="exitClick">确认</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { useRouter, useRoute } from 'vue-router'
  import { ref, onMounted, watch, computed, getCurrentInstance, reactive } from 'vue'
  import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'
  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const apiUrl = appContext.config.globalProperties.$apiUrl
  const store = useStore()
  const router = useRouter()
  const route = useRoute()

  const navList = ref([
    {
      id: 1,
      name: '公司信息',
    },
    {
      id: 4,
      name: '资质审核',
    },
    {
      id: 2,
      name: '我司商品',
    },
    {
      id: 5,
      name: '密码修改',
    },
    {
      id: 6,
      name: '退出登录',
    },
  ])

  // 导航栏ref
  const navbarRef = ref(null)

  // 左侧导航栏位置
  const navIndex = ref(1)

  // 头像
  const headImg = ref(null)
  const head_image_id = ref(null)

  // 店铺id
  const store_id = ref(null)
  // 上传图片
  const uploadData = ref({
    checkLogin: 0,
    storeUserId: 0,
  })

  // 用户信息
  const userInfo = ref({})
  const certification = ref({}) //公司信息

  // 审核状态
  const examineStatus = ref(null) //1审核中 2审核失败 3审核通过
  //资质审核是否可编辑
  const examineShow = ref(true)

  // 退出登录
  const exitShow = ref(false)

  // 公司信息
  const companyShow = ref(true)
  const companyRef = ref(null)
  const companyForm = reactive({
    phone: null,
    company_email: null,
    year: null,
    industry: null,
    desc: null,
  })
  // const companyRules = reactive({
  //   phone: [{ required: true, message: '请输入公司联系电话', trigger: 'blur' }],
  //   company_email: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  //   year: [{ required: true, message: '请输入企业办公地址', trigger: 'blur' }],
  //   industry: [{ required: true, message: '请上传营业执照', trigger: 'blur' }],
  //   desc: [
  //     { required: true, message: '请输入组织机构代码', trigger: 'blur' },
  //     { min: 18, max: 18, message: '统一社会信用代码长度 18 个字符', trigger: 'blur' },
  //   ],
  // })

  // 修改密码
  const formRef = ref(null)
  const passwordType = ref('password')
  const passwordType2 = ref('password')
  const passwordType3 = ref('password')
  const ruleForm = reactive({
    password: null,
    againPassword: null,
    currentPassword: null,
  })

  // 自定义验证函数
  const validateAgainPassword = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请确认密码'))
    } else if (value !== ruleForm.password) {
      callback(new Error('两次密码输入不一致'))
    } else {
      callback()
    }
  }
  const rules = reactive({
    currentPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
    password: [
      { required: true, message: '请输入登录密码', trigger: 'blur' },
      {
        min: 6,
        max: 20,
        message: '密码长度该为8-16个字母，并且组合如下：字母，数字和符号',
        trigger: ['blur', 'change'],
      },
      {
        pattern: /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).+$/,
        message: '密码是由大小写字母，数字组成',
        trigger: ['blur', 'change'],
      },
    ],
    againPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      { validator: validateAgainPassword, trigger: ['blur', 'change'] },
    ],
  })
  // 行业选项数据
  // const industryOptions = ref([
  //   { value: 'manufacturing', label: '制造业' },
  //   { value: 'technology', label: '科技行业' },
  //   { value: 'finance', label: '金融行业' },
  //   { value: 'healthcare', label: '医疗健康' },
  //   { value: 'education', label: '教育培训' },
  //   { value: 'retail', label: '零售贸易' },
  //   { value: 'logistics', label: '物流运输' },
  //   { value: 'construction', label: '建筑地产' },
  //   { value: 'energy', label: '能源化工' },
  //   { value: 'agriculture', label: '农业食品' },
  //   { value: 'media', label: '文化传媒' },
  //   { value: 'service', label: '服务业' },
  //   { value: 'other', label: '其他' },
  // ])

  // 资质审核
  const basicRef = ref(null)
  const basicForm = reactive({
    name: null,
    mobile: null,
    company_name: null,
    address: null,
    license_image_id: null,
    organizing_code: null,
    store_user_id: null,
  })
  const basicRules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    mobile: [
      { required: true, message: '请输入公司联系电话', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '联系电话格式错误', trigger: 'blur' },
      { min: 11, max: 11, message: '联系电话长度11个字符', trigger: 'blur' },
    ],
    company_name: [
      { required: true, message: '请输入企业名称', trigger: 'blur' },
      { min: 3, message: '企业名称最少3个字符', trigger: 'blur' },
    ],
    address: [{ required: true, message: '请输入企业办公地址', trigger: 'blur' }],
    license_image_id: [{ required: true, message: '请上传营业执照', trigger: 'blur' }],
    organizing_code: [
      { required: true, message: '请输入组织机构代码', trigger: 'blur' },
      { min: 18, max: 18, message: '统一社会信用代码长度 18 个字符', trigger: 'blur' },
    ],
  })
  const licenseImg = ref(null) //资质图片

  // 监听密码变化，实时验证确认密码
  watch(
    () => ruleForm.password,
    newVal => {
      if (ruleForm.againPassword && newVal !== ruleForm.againPassword) {
        setTimeout(() => {
          formRef.value?.validateField('againPassword')
        }, 0)
      }
    }
  )

  // 监听确认密码变化
  watch(
    () => ruleForm.againPassword,
    newVal => {
      if (newVal && ruleForm.password && newVal !== ruleForm.password) {
        setTimeout(() => {
          formRef.value?.validateField('againPassword')
        }, 0)
      }
    }
  )

  onMounted(() => {
    userInfoFn() //用户信息
  })

  // 用户信息
  const userInfoFn = () => {
    store.dispatch('home/userInfoApi').then(res => {
      if (res.status == 200) {
        userInfo.value = res.data.userInfo //总用户信息
        certification.value = res.data.userInfo.certification //公司信息，公司信息，审核状态等

        //上传图片用  用户id
        uploadData.value.storeUserId = userInfo.value.store_user_id || ''

        // 头像
        headImg.value = userInfo.value.avatar ? userInfo.value.avatar.preview_url : ''
        head_image_id.value = userInfo.value.avatar_id == 0 ? '' : userInfo.value.avatar_id

        // 公司信息
        companyForm.phone = certification.value.phone
        companyForm.company_email = certification.value.company_email
        companyForm.year = certification.value.year
        companyForm.industry = certification.value.industry
        companyForm.desc = certification.value.desc

        // 资质审核
        basicForm.name = certification.value.name
        basicForm.mobile = certification.value.mobile
        basicForm.company_name = certification.value.company_name
        basicForm.address = certification.value.address
        licenseImg.value = certification.value.license_image.preview_url
        basicForm.license_image_id = certification.value.license_image.file_id
        basicForm.organizing_code = certification.value.organizing_code
        basicForm.store_user_id = userInfo.value.store_user_id

        examineStatus.value = userInfo.value.certification_status //审核状态
      }
    })
  }

  const eyeClick = type => {
    if (type == 1) {
      passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
    } else if (type == 2) {
      passwordType2.value = passwordType2.value === 'password' ? 'text' : 'password'
    } else if (type == 3) {
      passwordType3.value = passwordType3.value === 'password' ? 'text' : 'password'
    }
  }

  const navClick = id => {
    if (id == 6) {
      exitShow.value = true
    } else if (id == 2) {
      if (userInfo.value.certification_status == 3) {
        router.push('/companyShop')
      } else {
        ElMessage.warning('您的资质暂未审核完成，审核通过后即可查看产品，请您耐心等待！')
      }
    } else {
      navIndex.value = id
    }
  }

  // 判断图片是否符合规格
  const beforeAvatarUpload = file => {
    let isJPG = file.type === 'image/jpeg'
    let isPNG = file.type === 'image/png'
    let isLt5M = file.size / 1024 / 1024 < 5

    // console.log(isJPG, isPNG, isLt5M, file.size / 1024 / 1024, '上传图片')
    if (!isJPG && !isPNG) {
      ElMessage.error('只能上传 JPG/PNG 格式的图片!')
      return false
    }

    if (!isLt5M) {
      ElMessage.error('上传图片大小不能超过 5MB!')
      return false
    }

    return (isPNG || isJPG) && isLt5M
  }

  // 成功获取图片
  const handleAvatarSuccess = (type, res) => {
    let preview_url = res.data.fileInfo.preview_url
    let file_id = res.data.fileInfo.file_id

    if (type == 2) {
      //营业执照
      licenseImg.value = preview_url
      basicForm.license_image_id = file_id
    } else if (type == 1) {
      //头像
      headImg.value = preview_url
      head_image_id.value = file_id
    }
  }

  // 删除图片
  const delateClick = type => {
    if (type == 1) {
      licenseImg.value = null
      basicForm.license_image_id = null
    }
  }

  // 修改头像
  const changeAvatar = () => {
    store
      .dispatch('home/changeAvatarApi', {
        avatarId: head_image_id.value,
      })
      .then(res => {})
  }

  // 公司信息
  const companyStep = () => {
    if (!companyShow.value) {
      store.dispatch('home/reSetInfoApi', { form: companyForm }).then(res => {
        if (res.status == 200) {
          changeAvatar() //修改头像

          ElNotification({
            title: '成功',
            message: res.message,
            type: 'success',
            duration: 1500,
          })
          setTimeout(() => {
            navbarRef.value.userInfoFn()
            userInfoFn()
          }, 1500)
        } else {
          ElNotification({
            title: '失败',
            message: res.message,
            type: 'error',
            duration: 2000,
          })
        }
      })
    }
    companyShow.value = !companyShow.value
  }

  // 资质审核-重新提交
  const againSubmit = () => {
    examineStatus.value = 3
    examineShow.value = false
  }

  // 资质审核
  const reSubmit = () => {
    basicRef.value.validate(valid => {
      if (valid) {
        console.log(basicForm, 'basicForm')
        store.dispatch('home/certificationGongApi', deepRemoveNull(basicForm)).then(res => {
          if (res.status == 200) {
            ElNotification({
              title: '成功',
              message: res.message,
              type: 'success',
              duration: 2000,
            })
            setTimeout(() => {
              userInfoFn()
            }, 1500)
          } else {
            ElNotification({
              title: '失败',
              message: res.message,
              type: 'error',
              duration: 2000,
            })
          }
        })
      }
    })
  }

  // 修改密码
  const oneStep = () => {
    formRef.value.validate(valid => {
      if (valid) {
        let form = {
          real_name: userInfo.value.real_name,
          user_name: userInfo.value.user_name,
          password: ruleForm.currentPassword,
          password_confirm: ruleForm.password,
        }
        store.dispatch('home/renewApi', { form: form }).then(res => {
          if (res.status == 200) {
            ElNotification({
              title: '成功',
              message: res.message,
              type: 'success',
              duration: 1500,
            })
            setTimeout(() => {
              exitClick()
            }, 1500)
          } else {
            ElNotification({
              title: '失败',
              message: res.message,
              type: 'error',
              duration: 2000,
            })
          }
        })
      } else {
        return false
      }
    })
  }

  // 退出登录
  const exitClick = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('is_super') //身份
    router.push('/login')
  }

  const deepRemoveNull = obj => {
    if (typeof obj !== 'object' || obj === null) return obj

    return Object.entries(obj).reduce((acc, [key, value]) => {
      const cleanedValue = deepRemoveNull(value)
      if (cleanedValue !== null) {
        acc[key] = cleanedValue
      }
      return acc
    }, {})
  }
</script>
<style scoped lang="less">
  // 兼容
  @media screen and (max-width: 1920px) {
    // label文字
    :deep(.el-form-item__label) {
      font-size: 14px !important;
    }
    // 输入外框
    :deep(.el-input__wrapper) {
      height: 45px !important;
      border-radius: 10px !important;
    }
    // 输入框文字
    :deep(.el-input__inner) {
      font-size: 14px !important;
    }
    // 红色提示文字
    :deep(.el-form-item__error) {
      margin-top: 2px !important;
    }

    // Select 选择框样式适配
    :deep(.el-select .el-input__wrapper) {
      height: 45px !important;
      border-radius: 10px !important;
    }

    :deep(.el-select .el-input__inner) {
      font-size: 14px !important;
    }

    // Textarea 文本域样式适配
    :deep(.el-textarea .el-textarea__inner) {
      font-size: 14px !important;
      border-radius: 10px !important;
      min-height: 87px !important;
      padding: 10px 12px !important;
    }

    .relative_height {
      padding: 20px 0 60px 0 !important;

      .info {
        .navbar {
          width: 260px !important;
          height: 85vh !important;
          margin-right: 18px !important;
          padding: 0 7px !important;

          .nav_wrap {
            padding: 35px 0 !important;
          }

          .nav_uploader {
            width: 68px !important;

            .nav_camera {
              width: 22px !important;
              bottom: 2px !important;
              right: -1px !important;
            }

            .nav_img {
              width: 68px !important;
            }
          }

          .nav_name {
            margin-top: 8px !important;
            font-size: 15px !important;
          }

          .nav_item {
            height: 55px !important;
            font-size: 15px !important;
          }
        }

        .form {
          min-height: 85vh !important;
          padding: 27px 33px 27px !important;

          .form_tit {
            font-size: 17px !important;
            margin-bottom: 55px !important;
          }

          .form_content {
            width: 52% !important;
          }

          .width_100 {
            width: 100% !important;
          }

          // 公司信息适配
          .form_basic {
            width: 70% !important;

            .basic_tit {
              font-size: 16px !important;
              padding: 12px 0 !important;
              margin-bottom: 22px !important;

              img {
                width: 23px !important;
              }
            }

            .basic_head {
              padding-bottom: 22px !important;

              .basic_uploader {
                width: 75px !important;

                .basic_camera {
                  width: 24px !important;
                  bottom: 3px !important;
                  right: -1px !important;
                }

                .basic_img {
                  width: 75px !important;
                }
              }
            }

            .company_form {
              .company_input {
                width: 48% !important;
              }

              .custom_textarea {
                width: 100% !important;
              }
            }
          }

          // 暂无采购商品
          .empty_tip {
            font-size: 15px !important;
            padding-top: 300px !important;
          }

          .custom-label {
            margin-bottom: 23px !important;
          }

          .eye-icon {
            width: 24px !important;
          }

          .form-tip {
            font-size: 13px !important;
            padding: 1px 0 0 10px !important;
          }

          .card_wrap {
            margin-bottom: 8px !important;
          }

          .form_upload {
            width: 230px !important;

            .img {
              width: 40px !important;
            }

            .text {
              font-size: 13px !important;
            }

            .card_icon {
              width: 18px !important;
              top: 8px !important;
              right: 8px !important;
            }

            .upload_abo {
              font-size: 13px !important;
            }
          }

          .mt_10 {
            margin-top: 30px !important;
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 15px !important;

              .select_all {
                font-size: 13px !important;
                gap: 6px !important;

                .checkbox {
                  width: 14px !important;
                  height: 14px !important;

                  .sign_img {
                    width: 8px !important;
                  }
                }
              }

              .delete_btn {
                padding: 5px 10px !important;
                font-size: 12px !important;
              }
            }
          }

          .product_list {
            .product_item {
              padding: 15px 0 !important;
              gap: 12px !important;

              .item_image {
                width: 80px !important;
                height: 80px !important;

                .item_checkbox {
                  .checkbox {
                    width: 18px !important;
                    height: 18px !important;

                    .sign_img {
                      width: 8px !important;
                    }
                  }
                }
              }

              .item_info {
                .item_title {
                  font-size: 14px !important;
                  margin-bottom: 6px !important;
                }

                .item_desc {
                  font-size: 12px !important;
                }
              }

              .item_quantity {
                gap: 4px !important;
                margin-right: 15px !important;
                padding: 3px 6px !important;

                .quantity_btn {
                  width: 16px !important;
                }

                .quantity_btn_plus {
                  width: 13px !important;
                }

                .quantity_input {
                  width: 45px !important;
                  height: 24px !important;
                  font-size: 12px !important;
                }
              }

              .item_delete {
                padding: 5px 10px 5px 0 !important;
                font-size: 12px !important;
              }
            }
          }
        }

        .examine {
          .exa_btn {
            width: 150px !important;
            margin-top: 25px !important;
            font-size: 13px !important;
            border-radius: 8px !important;
          }
        }

        .next_btn {
          height: 40px !important;
          border-radius: 10px !important;
          font-size: 14px !important;
        }
      }
    }

    .log_out {
      width: 430px !important;

      .tit {
        font-size: 16px !important;
        margin-bottom: 35px !important;
      }

      .btn {
        width: 120px !important;
        font-size: 13px !important;
        border-radius: 38px;
      }

      .btn_bor {
        margin-right: 13px !important;
      }
    }
  }

  @media screen and (max-width: 1700px) {
    // label文字
    :deep(.el-form-item__label) {
      font-size: 12px !important;
      margin-bottom: 6px !important;
    }
    // 输入外框
    :deep(.el-input__wrapper) {
      height: 35px !important;
      border-radius: 6px !important;
    }
    // 输入框文字
    :deep(.el-input__inner) {
      font-size: 12px !important;
    }

    // Select 选择框样式适配
    :deep(.el-select .el-input__wrapper) {
      height: 35px !important;
      border-radius: 6px !important;
    }

    :deep(.el-select .el-input__inner) {
      font-size: 12px !important;
    }

    // Textarea 文本域样式适配
    :deep(.el-textarea .el-textarea__inner) {
      font-size: 12px !important;
      border-radius: 6px !important;
      min-height: 87px !important;
      padding: 8px 10px !important;
    }

    .relative_height {
      .info {
        .navbar {
          width: 240px !important;
          height: 83vh !important;
          margin-right: 15px !important;
          padding: 0 6px !important;

          .nav_wrap {
            padding: 30px 0 !important;
          }

          .nav_uploader {
            width: 60px !important;

            .nav_camera {
              width: 20px !important;
              bottom: 2px !important;
              right: -1px !important;
            }

            .nav_img {
              width: 60px !important;
            }
          }

          .nav_name {
            margin-top: 6px !important;
            font-size: 14px !important;
          }

          .nav_item {
            height: 50px !important;
            font-size: 14px !important;
          }
        }

        .form {
          min-height: 83vh !important;
          padding: 25px 30px 25px !important;

          .form_tit {
            font-size: 16px !important;
            margin-bottom: 50px !important;
          }

          .form_content {
            width: 54% !important;
          }

          .width_100 {
            width: 100% !important;
          }

          // 公司信息适配
          .form_basic {
            width: 70% !important;

            .basic_tit {
              font-size: 15px !important;
              padding: 10px 0 !important;
              margin-bottom: 20px !important;

              img {
                width: 20px !important;
              }
            }

            .basic_head {
              padding-bottom: 20px !important;

              .basic_uploader {
                width: 65px !important;

                .basic_camera {
                  width: 20px !important;
                  bottom: 2px !important;
                  right: -1px !important;
                }

                .basic_img {
                  width: 65px !important;
                }
              }
            }

            .company_form {
              .company_input {
                width: 48% !important;
              }

              .custom_textarea {
                width: 100% !important;
              }
            }
          }

          .custom-label {
            margin-bottom: 20px !important;
          }

          .eye-icon {
            width: 20px !important;
          }

          /* 默认提示文字样式 */
          .form-tip {
            font-size: 11px !important;
            padding: 0px 0 0 8px !important;
          }

          .card_wrap {
            margin-bottom: 8px !important;
          }

          .form_upload {
            width: 200px !important;
            border-radius: 6px !important;

            .img {
              width: 30px !important;
            }

            .text {
              font-size: 11px !important;
              line-height: 1 !important;
            }

            .card_icon {
              width: 16px !important;
              top: 6px !important;
              right: 6px !important;
            }

            .upload_abo {
              font-size: 13px !important;
            }
          }

          .mt_10 {
            margin-top: 27px !important;
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 12px !important;

              .select_all {
                font-size: 11px !important;
                gap: 5px !important;

                .checkbox {
                  width: 12px !important;
                  height: 12px !important;

                  .sign_img {
                    width: 6px !important;
                  }
                }
              }

              .delete_btn {
                padding: 4px 8px !important;
                font-size: 10px !important;
              }
            }
          }

          .product_list {
            .product_item {
              padding: 12px 0 !important;
              gap: 10px !important;

              .item_image {
                width: 70px !important;
                height: 70px !important;

                .item_checkbox {
                  .checkbox {
                    width: 16px !important;
                    height: 16px !important;

                    .sign_img {
                      width: 7px !important;
                    }
                  }
                }
              }

              .item_info {
                .item_title {
                  font-size: 12px !important;
                  margin-bottom: 5px !important;
                }

                .item_desc {
                  font-size: 10px !important;
                }
              }

              .item_quantity {
                gap: 3px !important;
                margin-right: 12px !important;
                padding: 2px 5px !important;

                .quantity_btn {
                  width: 14px !important;
                }

                .quantity_btn_plus {
                  width: 11px !important;
                }

                .quantity_input {
                  width: 40px !important;
                  height: 22px !important;
                  font-size: 11px !important;
                }
              }

              .item_delete {
                padding: 4px 8px 4px 0 !important;
                font-size: 10px !important;
              }
            }
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 12px !important;

              .select_all {
                font-size: 11px !important;
                gap: 5px !important;

                .checkbox {
                  width: 12px !important;
                  height: 12px !important;

                  .sign_img {
                    width: 6px !important;
                  }
                }
              }

              .delete_btn {
                padding: 4px 8px !important;
                font-size: 10px !important;
              }
            }
          }

          .product_list {
            .product_item {
              padding: 12px 0 !important;
              gap: 10px !important;

              .item_image {
                width: 70px !important;
                height: 70px !important;

                .item_checkbox {
                  .checkbox {
                    width: 16px !important;
                    height: 16px !important;

                    .sign_img {
                      width: 7px !important;
                    }
                  }
                }
              }

              .item_info {
                .item_title {
                  font-size: 12px !important;
                  margin-bottom: 5px !important;
                }

                .item_desc {
                  font-size: 10px !important;
                }
              }

              .item_quantity {
                gap: 3px !important;
                margin-right: 12px !important;
                padding: 2px 5px !important;

                .quantity_btn {
                  width: 14px !important;
                }

                .quantity_btn_plus {
                  width: 11px !important;
                }

                .quantity_input {
                  width: 40px !important;
                  height: 20px !important;
                  font-size: 10px !important;
                }
              }

              .item_delete {
                padding: 4px 8px 4px 0 !important;
                font-size: 10px !important;
              }
            }
          }
        }

        .examine {
          padding: 130px 0px 0px !important;

          .img1 {
            width: 80px !important;
          }

          .img2 {
            width: 55px !important;
          }

          .exa_tit {
            font-size: 17px !important;
            margin: 20px 0 12px !important;
          }

          .exa_tip {
            font-size: 12px !important;
          }

          .exa_btn {
            width: 145px !important;
            margin-top: 25px !important;
            font-size: 13px !important;
            border-radius: 8px !important;
          }
        }

        .next_btn {
          height: 35px !important;
          font-size: 12px !important;
          border-radius: 6px !important;
          margin-top: 27px !important;
        }
      }
    }

    .log_out {
      width: 400px !important;

      .tit {
        font-size: 15px !important;
        margin-bottom: 32px !important;
      }

      .btn {
        width: 110px !important;
        font-size: 12px !important;
      }
    }
  }

  @media screen and (max-width: 1500px) {
    .relative_height {
      padding: 15px 0 50px 0 !important;

      .info {
        .navbar {
          width: 220px !important;
          height: 80vh !important;
          margin-right: 12px !important;
          padding: 0 5px !important;

          .nav_wrap {
            padding: 25px 0 !important;
          }

          .nav_uploader {
            width: 55px !important;

            .nav_camera {
              width: 18px !important;
              bottom: 2px !important;
              right: -1px !important;
            }

            .nav_img {
              width: 55px !important;
            }
          }

          .nav_name {
            font-size: 13px !important;
          }

          .nav_item {
            height: 45px !important;
            font-size: 13px !important;
          }
        }

        .form {
          min-height: 80vh !important;
          padding: 22px 25px 22px !important;

          .form_tit {
            font-size: 15px !important;
            margin-bottom: 45px !important;
          }

          .form_content {
            width: 56% !important;
          }

          // Select 选择框样式适配
          :deep(.el-select .el-input__wrapper) {
            height: 32px !important;
            border-radius: 5px !important;
          }

          :deep(.el-select .el-input__inner) {
            font-size: 11px !important;
          }

          // Textarea 文本域样式适配
          :deep(.el-textarea .el-textarea__inner) {
            font-size: 11px !important;
            border-radius: 5px !important;
            min-height: 87px !important;
            padding: 6px 8px !important;
          }

          .width_100 {
            width: 100% !important;
          }

          // 公司信息适配
          .form_basic {
            width: 70% !important;

            .basic_tit {
              font-size: 13px !important;
              padding: 6px 0 !important;
              margin-bottom: 16px !important;

              img {
                width: 16px !important;
              }
            }

            .basic_head {
              padding-bottom: 16px !important;

              .basic_uploader {
                width: 55px !important;

                .basic_camera {
                  width: 16px !important;
                  bottom: 1px !important;
                  right: -1px !important;
                }

                .basic_img {
                  width: 55px !important;
                }
              }
            }

            .company_form {
              .company_input {
                width: 48% !important;
              }

              .custom_textarea {
                width: 100% !important;
              }
            }
          }

          // 暂无采购商品
          .empty_tip {
            font-size: 13px !important;
            padding-top: 180px !important;
          }

          .card_wrap {
            margin-bottom: 5px !important;
          }

          .form_upload {
            width: 190px !important;

            .img {
              width: 25px !important;
            }

            .text {
              font-size: 10px !important;
            }

            .card_icon {
              width: 14px !important;
              top: 5px !important;
              right: 5px !important;
            }

            .upload_abo {
              font-size: 11px !important;
            }
          }

          .mt_10 {
            margin-top: 25px !important;
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 10px !important;

              .select_all {
                font-size: 10px !important;
                gap: 4px !important;

                .checkbox {
                  width: 10px !important;
                  height: 10px !important;

                  .sign_img {
                    width: 5px !important;
                  }
                }
              }

              .delete_btn {
                padding: 3px 6px !important;
                font-size: 9px !important;
              }
            }
          }

          .product_list {
            .product_item {
              padding: 10px 0 !important;
              gap: 8px !important;

              .item_image {
                width: 60px !important;
                height: 60px !important;

                .item_checkbox {
                  .checkbox {
                    width: 14px !important;
                    height: 14px !important;

                    .sign_img {
                      width: 6px !important;
                    }
                  }
                }
              }

              .item_info {
                .item_title {
                  font-size: 11px !important;
                  margin-bottom: 4px !important;
                }

                .item_desc {
                  font-size: 9px !important;
                }
              }

              .item_quantity {
                gap: 2px !important;
                margin-right: 10px !important;
                padding: 2px 4px !important;

                .quantity_btn {
                  width: 12px !important;
                }

                .quantity_btn_plus {
                  width: 9px !important;
                }

                .quantity_input {
                  width: 35px !important;
                  height: 18px !important;
                  font-size: 9px !important;
                }
              }

              .item_delete {
                padding: 3px 6px 3px 0 !important;
                font-size: 9px !important;
              }
            }
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 10px !important;

              .select_all {
                font-size: 10px !important;
                gap: 4px !important;

                .checkbox {
                  width: 10px !important;
                  height: 10px !important;

                  .sign_img {
                    width: 5px !important;
                  }
                }
              }

              .delete_btn {
                padding: 3px 6px !important;
                font-size: 9px !important;
              }
            }
          }

          .product_list {
            .product_item {
              padding: 10px 0 !important;
              gap: 8px !important;

              .item_image {
                width: 60px !important;
                height: 60px !important;

                .item_checkbox {
                  .checkbox {
                    width: 14px !important;
                    height: 14px !important;

                    .sign_img {
                      width: 6px !important;
                    }
                  }
                }
              }

              .item_info {
                .item_title {
                  font-size: 11px !important;
                  margin-bottom: 4px !important;
                }

                .item_desc {
                  font-size: 9px !important;
                }
              }

              .item_quantity {
                gap: 2px !important;
                margin-right: 10px !important;
                padding: 2px 4px !important;

                .quantity_btn {
                  width: 12px !important;
                }

                .quantity_btn_plus {
                  width: 9px !important;
                }

                .quantity_input {
                  width: 35px !important;
                  height: 18px !important;
                  font-size: 9px !important;
                }
              }

              .item_delete {
                padding: 3px 6px 3px 0 !important;
                font-size: 9px !important;
              }
            }
          }
        }

        .examine {
          padding: 120px 0px 0px !important;

          .img1 {
            width: 70px !important;
          }

          .img2 {
            width: 45px !important;
          }

          .exa_tit {
            font-size: 16px !important;
          }

          .exa_tip {
            font-size: 11px !important;
          }

          .exa_btn {
            width: 130px !important;
            margin-top: 25px !important;
            font-size: 12px !important;
            border-radius: 6px !important;
          }
        }
      }
    }

    .log_out {
      width: 370px !important;

      .tit {
        font-size: 14px !important;
        margin-bottom: 30px !important;
      }

      .btn {
        width: 100px !important;
        font-size: 11px !important;
      }

      .btn_bor {
        margin-right: 10px !important;
      }
    }
  }

  .relative_height {
    background: #f5f6fa;
    padding: 30px 0 50px 0;

    .info {
      .navbar {
        width: 287px;
        height: 87vh;
        background: #fff;
        margin-right: 20px;
        padding: 0 8px;
        box-sizing: border-box;

        .nav_item {
          width: 100%;
          height: 60px;
          font-size: 16px;
          position: relative;

          &.active {
            color: #5463ff;
            background: rgba(84, 99, 255, 0.07);
          }
          .nav_line {
            width: 2px;
            height: 100%;
            background: #5463ff;
            position: absolute;
            left: 0;
          }
        }
      }

      .nav_wrap {
        padding: 40px 0;

        .nav_uploader {
          position: relative;
          margin: 0 auto;
          width: 75px;
          aspect-ratio: 1/1;
          overflow: hidden;
          border-radius: 50%;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .nav_name {
          color: #3d3d3d;
          text-align: center;
          margin-top: 10px;
          font-size: 16px;
        }
      }

      .form {
        flex: 1;
        min-height: 87vh;
        box-sizing: border-box;
        background: #fff;
        padding: 30px 37px 30px;

        .form_tit {
          color: #3d3d3d;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 60px;
        }

        .form_basic {
          width: 70%;
          margin: 0 auto;

          .basic_tit {
            color: #3d3d3d;
            font-size: 16px;
            font-weight: bold;
            padding: 12px 0;
            margin-bottom: 22px;
            border-bottom: 1px solid #ebebeb;

            img {
              width: 23px;
              height: auto;
              margin-right: 10px;
            }
          }

          .basic_head {
            padding-bottom: 22px;

            .basic_uploader {
              position: relative;
              width: 75px;
              aspect-ratio: 1/1;
              margin-left: 30px;

              .basic_camera {
                width: 24px;
                height: auto;
                position: absolute;
                bottom: 3px;
                right: -1px;
                z-index: 25;
              }

              .basic_img {
                width: 75px;
                aspect-ratio: 1/1;
                border-radius: 50%;
                overflow: hidden;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }

          .company_form {
            .company_input {
              width: 48%;
            }

            .custom_textarea {
              width: 100%;
            }
          }
        }

        .form_content {
          width: 50%;
          margin: 0 auto;
        }

        .width_100 {
          width: 100%;
        }

        // 采购清单样式
        .list_header {
          padding: 15px 0 10px 0;

          .header_left {
            gap: 20px;

            .select_all {
              gap: 8px;
              font-size: 14px;
              color: #333;

              .checkbox {
                width: 16px;
                height: 16px;
                border: 1px solid #ddd;
                border-radius: 2px;
                position: relative;
                cursor: pointer;

                .sign_img {
                  width: 9px;
                  height: auto;
                }

                &.active {
                  background: #5463ff;
                  border-color: #5463ff;
                }
              }
            }

            .delete_btn {
              padding: 6px 12px;
              border: 1px solid rgba(61, 61, 61, 0.1);
              color: #3d3d3d;
              border-radius: 4px;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }

        .product_list {
          .product_item {
            padding: 20px 0;
            border-bottom: 1px solid #d8d8d8;
            align-items: center;
            gap: 15px;

            .item_image {
              width: 100px;
              height: 100px;
              border-radius: 8px;
              overflow: hidden;
              flex-shrink: 0;
              position: relative;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              .item_checkbox {
                position: absolute;
                bottom: 0;
                right: 0;

                .checkbox {
                  width: 21px;
                  height: 21px;
                  border: 2px solid #fff;
                  border-radius: 5px;
                  position: relative;
                  cursor: pointer;
                  background: #dde0ff;

                  .sign_img {
                    width: 10px;
                    height: auto;
                  }

                  &.active {
                    background: #5463ff;
                    border: 2px solid #fff;
                  }
                }
              }
            }

            .item_info {
              flex: 1;
              min-width: 0;

              .item_title {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 8px;
                line-height: 1.4;
              }

              .item_desc {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.5);
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }

            .item_quantity {
              align-items: center;
              gap: 5px;
              margin-right: 20px;
              border-radius: 3px;
              padding: 4px 8px;
              border: 0.8px solid #d9d9d9;

              .quantity_btn {
                width: 19px;
                height: auto;
                border-radius: 4px;
                color: #333;
                font-size: 14px;
                cursor: pointer;
              }

              .quantity_btn_plus {
                width: 15px;
                height: auto;
              }

              .quantity_input {
                width: 50px;
                height: 28px;
                text-align: center;
                font-size: 14px;
                outline: none;
                border: none;
              }

              /* 移除所有浏览器的上下箭头 */
              input[type='number'] {
                -moz-appearance: textfield; /* Firefox */
                appearance: textfield; /* 其他现代浏览器 */
              }

              /* 针对 WebKit 浏览器（Chrome, Safari, Edge） */
              input[type='number']::-webkit-outer-spin-button,
              input[type='number']::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
              }
            }

            .item_delete {
              padding: 6px 12px 6px 0;
              color: #3d3d3d;
              border-radius: 4px;
              font-size: 14px;
              cursor: pointer;

              &.active {
                color: #5463ff;
              }
            }
          }
        }

        // 暂无采购商品
        .empty_tip {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.5);
          text-align: center;
          padding-top: 400px;
        }

        .custom-label {
          margin-bottom: 25px;
        }

        .eye-icon {
          width: 27px;
          height: auto;
        }

        /* 默认提示文字样式 */
        .form-tip {
          color: #999;
          font-size: 14px;
          padding: 2px 0 0 10px;
        }

        .card_wrap {
          margin-bottom: 10px;
        }

        .form_blue{
          border: 1px solid #5463ff;
        }

        .form_upload {
          width: 280px;
          aspect-ratio: 16/9;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          overflow: hidden;
          position: relative;

          .upload_img {
            width: 76%;
            aspect-ratio: 16/10;
            border-radius: 6px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .upload_abo {
            width: 100%;
            aspect-ratio: 16/2;
            font-size: 14px;
            color: #5463ff;
            text-align: center;
            background: rgba(84, 99, 255, 0.15);
            position: absolute;
            bottom: 0;
          }

          .card_img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .mt_10 {
          margin-top: 30px;
        }
      }

      .examine {
        text-align: center;
        padding: 225px 0px 0px;
        box-sizing: border-box;

        .img1 {
          width: 110px;
          height: auto;
        }

        .img2 {
          width: 72px;
          height: auto;
        }

        .exa_tit {
          font-size: 20px;
          color: #333;
          font-weight: bold;
          margin: 34px 0 16px;
        }

        .exa_tip {
          font-size: 16px;
          color: rgba(51, 51, 51, 0.6);
        }

        .exa_btn {
          width: 170px;
          aspect-ratio: 16/4.1;
          margin: 0px auto;
          margin-top: 28px;
          color: #fff;
          font-size: 15px;
          border-radius: 10px;
          background: #5463ff;
        }

        .exa_prompt {
          width: 80%;
          background: #f8f9fd;
          margin: 0 auto;
          padding: 25px 50px;
          margin-top: 40px;
          text-align: left;
          .pro_tit {
            font-size: 16px;
            color: #333;
            margin-bottom: 14px;
          }
          .pro_cont {
            font-size: 14px;
            color: rgba(51, 51, 51, 0.58);

            img {
              width: 14px;
              margin: 2px 10px 0 0;
            }
          }
        }
      }

      .next_btn {
        width: 100%;
        height: 53px;
        color: #fff;
        font-size: 16px;
        border-radius: 13px;
        background: #5463ff;
        margin: 0 auto;
        margin-top: 30px;
      }
      .next_btn_company {
        width: 75%;
      }
    }
  }

  // 退出登录
  .log_out {
    width: 480px;
    aspect-ratio: 3/1.1;

    .tit {
      color: #333;
      font-size: 18px;
      margin-bottom: 43px;
    }

    .btn {
      width: 130px;
      aspect-ratio: 3/0.8;
      font-size: 14px;
      color: #fff;
      border-radius: 38px;
      background: #5463ff;
    }

    .btn_bor {
      color: #595959;
      background: #fff;
      margin-right: 15px;
      border: 1px solid rgba(0, 0, 0, 0.15);
    }
  }

  // label文字
  :deep(.el-form-item__label) {
    font-size: 16px;
    color: #333;
    margin-bottom: 11px;
  }
  // 输入外框
  :deep(.el-input__wrapper) {
    height: 53px;
    border-radius: 13px;
    box-shadow: 0 0 0 1px #5463ff inset;
  }
  // 输入框文字
  :deep(.el-input__inner) {
    color: #202020;
    font-size: 16px;
  }
  // 红色提示文字
  :deep(.el-form-item__error) {
    margin-top: 3px;
  }
  // 输入框聚焦时蓝色边框
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #5463ff inset !important;
  }

  // disabled状态的输入框背景
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #f5f6ff !important;
    border: none !important;
    box-shadow: none !important;
    cursor: auto !important;
  }
  // disabled状态的输入框文字
  :deep(.el-input.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #3d3d3d !important;
    cursor: auto !important;
  }

  :deep(.el-input.is-disabled .el-input__inner::placeholder) {
    -webkit-text-fill-color: #999 !important;
  }

  // Select 选择框样式

  :deep(.el-select__wrapper) {
    height: 53px;
    color: #202020;
    font-size: 16px;
    border-radius: 13px;
    box-shadow: 0 0 0 1px #5463ff inset;
  }

  :deep(.el-select__wrapper.is-disabled) {
    background-color: #f5f6ff !important;
    border: none !important;
    box-shadow: none !important;
  }
  // disabled状态的输入框文字
  :deep(.el-select__wrapper.is-disabled) {
    -webkit-text-fill-color: #3d3d3d !important;
  }

  :deep(.el-select__wrapper.is-disabled::placeholder) {
    -webkit-text-fill-color: #999 !important;
  }

  // 下拉箭头样式
  :deep(.el-select__wrapper .el-input__suffix) {
    color: #5463ff;
  }

  :deep(.el-select__wrapper .is-disabled .el-input__suffix) {
    color: #3d3d3d;
  }

  // Textarea 文本域样式
  :deep(.el-textarea .el-textarea__inner) {
    color: #202020;
    font-size: 16px;
    border-radius: 13px;
    padding: 12px 15px;
    min-height: 87px;
    resize: none;
    box-shadow: 0 0 0 1px #5463ff inset;
  }

  // 自定义textarea样式
  .custom_textarea {
    width: 100%;
  }

  :deep(.el-textarea .el-textarea__inner:focus) {
    box-shadow: 0 0 0 1px #5463ff inset;
  }

  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: #f5f6ff !important;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    border-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: auto !important;
  }

  :deep(.el-textarea.is-disabled .el-textarea__inner::placeholder) {
    -webkit-text-fill-color: #999 !important;
  }

  // 退出登录弹窗
  :deep(.el-dialog__header) {
    padding: 0;
  }
  :deep(.el-dialog) {
    padding: 0;
    width: fit-content;
    border-radius: 13px;
  }
</style>

// 全局样式覆盖 Element Plus MessageBox
<style>
  body .el-message-box .el-message-box__status.el-icon {
    color: #5463ff !important;
  }

  /* 最强优先级覆盖 */
  html body .el-overlay .el-message-box .el-message-box__btns .el-button--primary {
    background-color: #5463ff !important;
    border-color: #5463ff !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
  }

  html body .el-overlay .el-message-box .el-message-box__btns .el-button--default {
    color: #606266 !important;
    border-color: #dcdfe6 !important;
    background-color: #fff !important;
  }

  html body .el-overlay .el-message-box .el-message-box__btns .el-button--default:hover {
    color: #5463ff !important;
    border-color: #5463ff !important;
    background-color: #fff !important;
  }

  html body .el-overlay .el-message-box .el-message-box__btns .el-button--default:focus {
    color: #5463ff !important;
    border-color: #5463ff !important;
    background-color: #fff !important;
  }
</style>
